    
    <h3 style="background-color: #f0f0f0;">行业类别管理,左边表格为一级分类，右边为左边选择所对应的二级分类</h3> 
    <div class="main-container">
        <!-- 表格区域 -->
        <div class="tables-container">
            <!-- 左侧表格 - 35%宽度 -->
            <div class="table-container left-table">
                <table id="leftTable">
                    <thead>
                        <tr id="main-header"> 
                        </tr>
                    </thead>
                    <tbody id="main-tbody">
                        <!-- 数据将通过JavaScript生成 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 右侧表格 - 65%宽度 -->
            <div class="table-container right-table">
                <table id="rightTable">
                    <thead>
                        <tr id="child-header"> 
                        </tr>
                    </thead>
                    <tbody id="child-body">
                        <!-- 数据将通过JavaScript生成 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 操作面板区域 -->
        <div class="panels-container"> 
            <div class="panel left-panel" id="leftPanel">
                <button class="btn btn-primary" id="leftAddBtn" onClick="addNew(1)">新增/new item</button>
                <button class="btn btn-warning" id="leftEditBtn" onClick="editItem(1)">编辑/Edit</button> 
            </div> 
            <div class="panel right-panel" id="rightPanel">
                <button class="btn btn-primary" id="rightAddBtn" onClick="addNew(2)">新增/new item</button> 
                <button class="btn btn-warning" id="rightEditBtn" onClick="editItem(2)">编辑/edit</button>
                <button class="btn btn-danger" id="rightDeleteBtn" onClick="delItem(2)">删除/delete</button> 
            </div>
        </div> 
    </div> 
    
    <div id="edit-modal" class="modal">
        <div class="modal-content-4">
            <h3 class="modal-title">编辑行业分类(Edit Category)</h3>
            <table class="no-hover" border=0 width="90%" align="center" >
                <tr>
                    <td width="25%" style="text-align: right;">代码:</td>
                    <td width="75%"><input type="text"  style="height:26px" name="ycode" value="" size="4" readonly></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">中文名:</td>
                    <td width="75%"><input type="text" style="height:26px" name="cname" value="" size="36"></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">英文名:</td>
                    <td width="75%"><input type="text" style="height:26px" name="ename" value="" size="64"></td>
                </tr>
                <tr>
                    <td width="25%" style="text-align: right;">状态:</td>
                    <td width="75%"> 
                       <input type="radio" name="status" value="0" id="s0">
                       <label for="s0">无效</label>&nbsp;&nbsp;&nbsp;
                       <input type="radio" name="status" value="1" id="s1">
                       <label for="s1">有效</label>
                    </td>
                </tr>
            </table> 
            <div class="modal-buttons">
                <button class="modal-btn cancel-btn" onclick="closeModal()">取消</button>
                <button class="modal-btn save-btn" onclick="saveChanges()">保存</button>
            </div>
        </div>
    </div>
    
<script>
	var header1 = [["编码","Code"],["中文名","Chinese name"],["英文名","Englisg name"],["有效否","validStatus"]];
	var buttons = [["新增","add new"],["保存","save"],["删除","delete"]];
	var dataList = null;
	var leftCode = null;
	var rightCode = null;
	
	function removeItem(item){
		var d = null;
		for (let i = 0; i < dataList.length; i++) { 
	    	 let v = dataList[i]; 
	    	 if(v["ycode"] == item["ycode"]){
	    		 if(i>0){
	    			 d = dataList[i-1];
	    		 } 
	    		 dataList.splice(i, 1);
	    		 break; 
	    	 }
		} 
		if(d == null){
			if(dataList.length>0){
				d = dataList[0];
			}else{
				var lb = document.getElementById("main-tbody");
				lb.innerHTML = "" ;
				var rb = document.getElementById("child-body");
				rb.innerHTML = "" ;
				return;
			}
		}
		
		if(d["ycode"].length==1){
			leftCode = d["ycode"].substring(0,1);
			rightCode = null;
			showIndustryList(); 
			showSubList(leftCode); 
		}else{
			leftCode = d["ycode"].substring(0,1);
			rightCode = d["ycode"];
			showIndustryList(); 
			showSubList(leftCode); 
		}
		var m = {"ycode":d["ycode"].substring(0,1)};
		selectAndScrollTable(m);
		selectAndScrollTable(d);
	}
	
	
	function updateList(item){
		debugger
		var saved = false;
		for (let i = 0; i < dataList.length; i++) { 
	    	 let v = dataList[i]; 
	    	 if(v["ycode"] == item["ycode"]){
	    		 dataList[i] = item;
	    		 saved = true;
	    		 break;
	    	 }else{
	    		 if(item["ycode"] < v["ycode"]){
	    			 saved = true;
	    			 dataList.splice(i, 0, item);
	    			 break;
	    		 }
	    	 }
		}
		if(saved==false){
			dataList.splice(dataList.length + 1, 0, item);
		}		
		if(item["ycode"].length==1){
			showIndustryList();  
		}else{
			showSubList(item["ycode"].substring(0,1)); 
		} 
	}
	
	function selectAndScrollTable(item){
		if(item["ycode"].length==1){ 
			var row = findRowInTbaleBodyByColumnValue("leftTable",0,item["ycode"]);
			if(row>=0){
				selectAndScrollToRow("leftTable",row+1);  //thead作为第一行
				showSubList(item["ycode"]);
			}
			var row = findRowInTbaleBodyByColumnValue("rightTable",0,item["ycode"]);
			if(row>=0){
				selectAndScrollToRow("rightTable",row+1);  //thead作为第一行
				setRightCode(item["ycode"]);
			}
		}else{ 
			var row = findRowInTbaleBodyByColumnValue("rightTable",0,item["ycode"]);
			if(row>=0){
				selectAndScrollToRow("rightTable",row+1);  //thead作为第一行
				setRightCode(item["ycode"]);
			}
		} 
	}
	
	function saveChanges(){
		var item={"ycode":getInputValue("ycode"),
				"cname":getInputValue("cname"),
				"ename":getInputValue("ename"),
				"status":getInputValue("status"),
				};
		//alert(JSON.stringify(item,null,2)); 
		if(item["cname"].length < 2 || item["cname"].length > 12){
			alert("cname , over 12 chars or less 3 chars");
			focus("cname");
			return;
		}
	    if(item["ename"].length < 3 || item["ename"].length > 21){
	    	alert("ename , over 21 chars or less 3 chars");
			focus("ename");
	    	return;
		}
	    var url = industry_save_uri;
	    var token = curUser["token"];  
		ajaxPostJson(url , token, item , function(status,ret){
				  console.log("Status="+status);
				  console.log("save return="+JSON.stringify(ret,null,2)); 
				  if(ret.status==1){
					  updateList(ret["data"]);
					  closeModal();
					  alert("Save Succeed!");
					  selectAndScrollTable(ret["data"]);
				  }else{
					  alert(JSON.stringify(ret,null,2));  
				  }
		});
	}
	
	function showDataOn(item){ 
		setInputValue("ycode",item["ycode"]);
		setInputValue("cname",item["cname"]);
		setInputValue("ename",item["ename"]);
		setInputValue("status",item["status"]); 
		focus("cname");
	}
	
	function getItem(c){
		debugger;
		for (let i = 0; i < dataList.length; i++) { 
	    	 let v = dataList[i];
	    	 if(v["ycode"] == c){
	    		 return v;
	    	 }
		}
		return null;
	}
	
	function showHeader(headerId,lang='cn'){
		debugger;
		 const row = document.getElementById(headerId);
		 let html = '';
	     for (let i = 0; i < header1.length; i++) { 
	    	 if(lang=='cn'){
	    		 html += "<th>"+ header1[i][0] +"</th>"; 
	    	 }else{
	    		 html += "<th>"+ header1[i][1] +"</th>"; 
	    	 } 
	     }
		 row.innerHTML = html ;
	}  
	
	function nextMainCode(){
		var index = 0;
		var c ;
		for (let i = 0; i < dataList.length; i++) { 
   	    	let v = dataList[i]; 
   	    	if(v["ycode"].length != 1){ 
   	    	    continue;
   	    	}
   	    	c = v["ycode"].charCodeAt(0) - 65 ; //A is 65
   	    	if(index != c){
   	    		break;
   	    	}
   	    	index = index + 1;
		}
		if(index > 26){
			alert("Too much top categorys!\r\nMax: 26 ");
			return null;
		}
		return String.fromCharCode(index + 65);   
	}
	
	function nextSubCode(firstChar){
		var index = 0;
    	var num = null; 
    	for (let i = 0; i < dataList.length; i++){
    		let v = dataList[i];
    		if(v["ycode"].length==1){
    			continue;
    		}
    		if( v["ycode"].charAt(0) != firstChar ){
    			continue;
    		}
    		index ++ ;
    		num = parseInt(v["ycode"].substring(1) , 10) ;
    		if(num != index){ 
    			break;
    		}else{
    			num = null;
    		}
    	} 
    	
    	if(num==null){
    		index ++;  //序号 + 1
    	}
    	
    	if(index > 99){
    		alert("Too much child categorys!\r\nMax : 100");
    		return null;
    	}
    	var next = String(index);
    	while(next.length < 2){
    		next = "0" + next;
    	} 
   		next = firstChar + next ; 
   		return next;
	}
	
    function newItem(firstChar){
    	debugger;
    	var next = null;
    	if(firstChar == null){
    		next = nextMainCode(); 
    	}else{
    		next = nextSubCode(firstChar);
    	} 
    	if(next == null){
    		return null;
    	}
    	var item = {"ycode":next,"cname":"","ename":"","status":1};
    	return item;
    }
    
	function addNew(t){
		var item = null;
		if(t==1){ //新增主类
			//leftCode = null;
		    item = newItem(null);
		}else{ //新增子类
			if(leftCode == null){
				alert("Please select main category!");
				return;
			}
			//rightCode = null;
			item = newItem(leftCode);
		} 
		if(item == null){
			return;
		}
		openEditModal();
		showDataOn(item); 
	}

	function editItem(t){
		//alert("edit item, type="+t+",rCode="+rightCode+",lCode="+leftCode); 
		var item = null;
		if(t==1){
			if(leftCode==null){
				alert("Please select main category!");
				return;
			}
			item = getItem(leftCode); 
		}else{
			if(rightCode == null){
				alert("Please select child category!");
				return;
			}
			item = getItem(rightCode); 
		}
		 
		if(item == null){
			alert("Please select item first!");
			return;
		} 
		openEditModal();
		showDataOn(item);
	}

	function delItem(){
		//alert("edit item,rCode="+rightCode+",lCode="+leftCode);
		debugger;
		var code = rightCode;
		if(code == null){
			return;
		}
		var num = 0;
		for (let i = 0; i < dataList.length; i++) { 
			let v = dataList[i];
			if(v["ycode"].startsWith(code)==true){
				num = num + 1;
			}
		}
		if(num<1){
			return;
		}
		if(num >1){
			alert("Can not delete which have sub items!");
			return;
		}
		//alert("delete, ycode = " + code);
		var url = industry_del_uri;
		var data={"ycode":code};
		var token = curUser["token"]
		ajaxPostJson(url,token, data, function(status,ret){
			if(status==0){
				if(ret["status"]==1){
					removeItem(ret["data"]);
				}else{
					alert("处理失败\r\n" + ret["errorCode"] +":" + ret["desc"]);
				}
			}else{
				alert("请求异常\r\n"+ ret);
			}
		});
	}

	function showTableBody(bodyId,sCode=null){
		debugger;
		if(dataList == null){
			alert("list is null!");
			return;
		}
		 var isMain = false;
		 if(sCode == null || sCode.length==0){
			 isMain = true;
		 }
		 
		 const body = document.getElementById(bodyId);
		 let html = '';
	     for (let i = 0; i < dataList.length; i++) { 
	    	 let v = dataList[i];
	    	 if(sCode==null || sCode.length==0){
	    		 if(v["ycode"].length>1){
	        		 continue;
	        	 }
	    	 }else{
	    		 if(v["ycode"].startsWith(sCode)==false){
	    			 continue;
	    		 }
	    	 } 
	    	 if(isMain==true){
	    		 html += "<tr onClick=\"showSubList(\'"+v["ycode"]+"')\">";
	    	 }else{
	    		 html += "<tr onClick=\"setRightCode(\'"+v["ycode"]+"')\">";
	    	 }
	    	 
	    	 if(v["status"] != 1){
	    		 html += 
	                 "<td><font color='red'>"+v["ycode"]+"</font></td>"+
	                 "<td><font color='red'>"+v["cname"]+"</font></td>"+
	                 "<td><font color='red'>"+v["ename"]+"</font></td>";
	    	 }else{
	    		 html += 
	                 "<td>"+v["ycode"]+"</td>"+
	                 "<td>"+v["cname"]+"</td>"+
	                 "<td>"+v["ename"]+"</td>";
	    	 }  
	        if(currentLang=='cn'){
	        	if(v["status"] != 1){ 
	            	html += "<td><font color='red'>无效</font></td>";
	            }else{
	            	html += "<td>有效</td>";
	            }
	        }else{
	        	if(v["status"] != 1){ 
	        		html += "<td><font color='red'>no</font></td>";
	            }else{
	            	html += "<td>yes</td>"; 
	            }
	        } 
	        html += "</tr>"; 
	     }
	     body.innerHTML = html ;
	} 
	
	function showSubList(code){
		showTableBody("child-body",code);
		setupRowHighlight("rightTable");
		leftCode = code;
		rightCode = null;
	}

	function setRightCode(v){
		rightCode = v;
	} 
	
	function switchContantLang(){
		//alert("content to lang:"+currentLang);
	}

	function showIndustryList(){
		showTableBody("main-tbody");
		setupRowHighlight("leftTable");
	}
	
	function readIndustryList(){ 
		var url = industry_list_uri+"/"; 
		debugger;
		ajaxGetJson(url , function(status,ret){
			  console.log("Status="+status);
			 // console.log("list Data="+JSON.stringify(ret,null,2)); 
			  if(status==0){
				  if(ret.status==1){ 
					  dataList = ret["data"];   
					  showIndustryList();
				  }else{
					  alert("Error:"+ret["errorCode"]+"\r\nMsg="+ret["desc"]);  
				  }
			  }else{
				  alert("httpStatus="+status+"\r\nErrorMsg="+ret);
			  } 
	    },true,null);
	}
        
    var dataList = null;
    
    showHeader("main-header",currentLang);
    showHeader("child-header",currentLang);
    
    readIndustryList();  
    
</script>
